<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML5 3D无限循环图片流DEMO演示</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

  <h4>来源： https://codepen.io/jh3y/pen/WNRvqJP</h4>

<!-- partial:index.partial.html -->
<div class="boxes">
  <div class="box" style="--src: url(images/ab67616d00001e020ecc8c4fd215d9eb83cbfdb3.jpg)"><span>1</span><img src="images/ab67616d00001e020ecc8c4fd215d9eb83cbfdb3.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e02d9194aa18fa4c9362b47464f.jpg)"><span>2</span><img src="images/ab67616d00001e02d9194aa18fa4c9362b47464f.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e02a7ea08ab3914c5fb2084a8ac.jpg)"><span>3</span><img src="images/ab67616d00001e02a7ea08ab3914c5fb2084a8ac.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e0213ca80c3035333e5a6fcea59.jpg)"><span>4</span><img src="images/ab67616d00001e0213ca80c3035333e5a6fcea59.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e02df04e6071763615d44643725.jpg)"><span>5</span><img src="images/ab67616d00001e02df04e6071763615d44643725.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e0239c7302c04f8d06f60e14403.jpg)"><span>6</span><img src="images/ab67616d00001e0239c7302c04f8d06f60e14403.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e021c0bcf8b536295438d26c70d.jpg)"><span>7</span><img src="images/ab67616d00001e021c0bcf8b536295438d26c70d.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e029bbd79106e510d13a9a5ec33.jpg)"><span>8</span><img src="images/ab67616d00001e029bbd79106e510d13a9a5ec33.jpg"/></div>
  <div class="box" style="--src: url(images/ab67616d00001e021d97ca7376f835055f828139.jpg)"><span>9</span><img src="images/ab67616d00001e021d97ca7376f835055f828139.jpg"/></div>
  <div class="box" style="--src: url(images/ab67706c0000bebb30677d72001e25584b0fbb37.jpg)"><span>10</span><img src="images/ab67706c0000bebb30677d72001e25584b0fbb37.jpg"/></div>
  <div class="controls">
    <button class="next"><span>Previous album</span>
      <svg viewBox="0 0 448 512" width="100" title="Previous Album">
        <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path>
      </svg>
    </button>
    <button class="prev"><span>Next album</span>
      <svg viewBox="0 0 448 512" width="100" title="Next Album">
        <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path>
      </svg>
    </button>
  </div>
</div>
<svg class="scroll-icon" viewBox="0 0 24 24">
  <path fill="currentColor" d="M20 6H23L19 2L15 6H18V18H15L19 22L23 18H20V6M9 3.09C11.83 3.57 14 6.04 14 9H9V3.09M14 11V15C14 18.3 11.3 21 8 21S2 18.3 2 15V11H14M7 9H2C2 6.04 4.17 3.57 7 3.09V9Z"></path>
</svg>
<div class="drag-proxy"></div>
<!-- partial -->
  <script type="module" src="./script.js"></script>

</body>
</html>
